import { observer } from 'mobx-react';
import classNames from 'classnames';
import { WeaLeftRightLayout } from 'ecCom';
import AceEditor from 'react-ace';
import 'brace/mode/html';
import 'brace/theme/tomorrow';
import CusCodeFunctions from './CusCodeFunctions';
import CusCodeQuick from './CusCodeQuick';
import CusFormula from './CusFormula';
import { WeaTools, WeaTab, WeaLocaleProvider } from 'ecCom'
const getLabel = WeaLocaleProvider.getLabel;
@observer
export default class CodeEditor extends React.Component {
    state = {
        templateKey: '',
    }
    render() {
        const { store, designerStore } = this.props;
        const { editorType, cusFormulaId, height } = store;
        const { templateKey } = this.state;
        return (
            <div className={classNames("edc-excel-code-editor", { show: store.visible })}>
                <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@vbhpv1`}
                    leftCom={<CusCodeFunctions ecId={`${this && this.props && this.props.ecId || ''}_CusCodeFunctions@mpxkfw`} onChange={this.changeTemplateKey} />}
                    leftWidth={300}
                >
                    <CusCodeQuick ecId={`${this && this.props && this.props.ecId || ''}_CusCodeQuick@kbv3x5`} templateKey={templateKey} designerStore={this.props.designerStore} insertScript={this.insertScript}></CusCodeQuick>

                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@jpnr7b`}
                        style={{ width: 'code' === editorType?'100%':'calc(100% - 300px)'}}
                        datas={[{ title: getLabel('505950', '代码块'), editorType: 'code' }, { title: getLabel('502403', '自定义公式'), editorType: 'formula' }]}
                        keyParam="editorType"
                        selectedKey={store.editorType}
                        onChange={v => store.editorType=v }
                    />

                    {'code' === editorType &&
                        <AceEditor ecId={`${this && this.props && this.props.ecId || ''}_AceEditor@vazmkn`}
                            mode="html"
                            theme="tomorrow"
                            onChange={store.onChange}
                            value={store.currentCodeContent}
                            name="UNIQUE_CODEID_OF_DIV"
                            focus={"true"}
                            editorProps={{ $blockScrolling: true }}
                            height={height}
                            width = {"100%"}
                            ref={ref => this.aceEditor = ref}
                            commands={[{    
                                name: 'saveCode', 
                                bindKey: {win: 'Ctrl-S', mac: 'Command-S'},
                                exec: ()=>{store.save();}   
                            }]}
                        />
                    }
                    {'formula' === editorType &&
                        <AceEditor ecId={`${this && this.props && this.props.ecId || ''}_AceEditor@mdcq52`}
                            mode="javascript"
                            theme="tomorrow"
                            onChange={store.changeCusFormula}
                            value={store.cusFormulaContent}
                            name="UNIQUE_ID_OF_DIV"
                            focus={"true"}
                            editorProps={{ $blockScrolling: true }}
                            height={height}
                            width={'calc(100% - 300px)'}
                            readOnly={cusFormulaId===''?true:false}
                            ref={ref => this.cusFormulaEditor = ref}
                            commands={[{    
                                name: 'saveFormula', 
                                bindKey: {win: 'Ctrl-S', mac: 'Command-S'},
                                exec: ()=>{store.save();}   
                            }]}
                        />}
                    {'formula' === editorType &&
                        <div style={{ background:'#fff',height: '100%', width: 300, position: 'absolute', top: 0, right: 0, border: '1px solid #eaeaea' }}>
                            <CusFormula ecId={`${this && this.props && this.props.ecId || ''}_CusFormula@e7oh92`} cusFormulaId={cusFormulaId} designerStore={designerStore} onChange={this.changeCusFormula} />
                        </div>
                    }
                </WeaLeftRightLayout>

            </div>

        )
    }

    componentDidUpdate() {
        setTimeout(() => {
            this.changeContentHeight();
        }, 50);
    }

    changeTemplateKey = (templateKey) => {
        this.setState({
            templateKey
        })
    }
    insertScript = (script) => {
        if (this.aceEditor) {
            window.editor = this.aceEditor.editor;
            this.aceEditor.editor.insert(script)
        } else if (this.cusFormulaEditor) {
            window.cusFormulaEditor = this.cusFormulaEditor.editor;
            if(!this.cusFormulaEditor.editor.getReadOnly()) this.cusFormulaEditor.editor.insert(script)
        }
    }
    changeCusFormula = (cusFormula) => {
        const { store } = this.props;
        store.cusFormulaId=cusFormula.id||'';
        store.cusFormulaName=cusFormula.name;
        store.cusFormulaDesc=cusFormula.describes;
        store.cusFormulaContent=WeaTools.Base64.decode(cusFormula.content||'');
        if (this.cusFormulaEditor) {
            window.cusFormulaEditor = this.cusFormulaEditor.editor;
            this.cusFormulaEditor.editor.setReadOnly(false); 
            this.cusFormulaEditor.editor.setValue(WeaTools.Base64.decode(cusFormula.content||''));
        }
    }

    changeContentHeight = () => {
        const { store } = this.props;
        const h1 = $('.wea-edc-content').outerHeight();
        const h2 = $('.edc-excel-code-qs').outerHeight();
        const h3 = $('.wea-tab').outerHeight();
        const h = h1 - h2 - h3;
        store.height = h;
    }
}